<template>
  <div>
    <Spin fix v-if="ifSpin">
      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
      <div>附件生成中</div>
    </Spin>
    <Form :label-width="100" ref="formInline" :model="formInline">
      <div v-if="switchFlag">
        <Row :gutter="16" class="query-form2" >
          <i-col span="8">
            <FormItem label="二级集团：" prop="twolevelOrgName">
              <two-level-org org-code v-model="formInline.createOrgId" ></two-level-org>
            </FormItem>
          </i-col>
          <i-col span="8">
            <FormItem label="企业名称：">
              <company-select v-model="formInline.orgName"></company-select>
            </FormItem>
          </i-col>
          <i-col span="8">
            <div style="float: right;">
              <Button class="ivu-btn-query"  icon="md-search"  @click="query">查询</Button>
              <Button class="ivu-btn-reset" style="margin-left: 10px" @click="cancel">重置</Button>
              <Button @click="switchQuery(false)" style="margin-left: 5px" class="ivu-btn-switch2" type="text" >展开<Icon type="ios-arrow-down"/></Button>
            </div>
          </i-col>
        </Row>
      </div>
      <div v-else>
        <Row :gutter="16" class="query-form2" >
          <i-col span="8">
            <FormItem label="二级集团：" prop="twolevelOrgName">
              <two-level-org org-code v-model="formInline.twolevelOrgName" ></two-level-org>
            </FormItem>
          </i-col>
          <i-col span="8">
            <FormItem label="企业名称：">
              <company-select v-model="formInline.orgName"></company-select>
            </FormItem>
          </i-col>
          <i-col span="8">
            <FormItem label="投入年份：">
              <DatePicker v-model="formInline.inputYear"  type="year" placeholder="请选择投入年份" style="width: 100%"></DatePicker>
            </FormItem>
          </i-col>
        </Row>
        <Row :gutter="16" class="query-form2" >
          <i-col span="24">
            <div style="float: right;">
              <Button class="ivu-btn-query"  icon="md-search"  @click="query">查询</Button>
              <Button class="ivu-btn-reset" style="margin-left: 10px" @click="cancel">重置</Button>
              <Button @click="switchQuery(true)" style="margin-left: 10px" class="ivu-btn-switch2" type="text" >收起<Icon type="ios-arrow-up" /></Button>
            </div>
          </i-col>
        </Row>
      </div>
    </Form>
    <Row class="query-form">
      <i-col span="24">
        <Button size="large" type="success" class="ivu-btn-add" icon="md-download" @click="exportRows">导出</Button>
      </i-col>
    </Row>
    <Table ref='table' style="margin-top: 10px" :loading="loading" border :columns="columns" no-data-text="没有查询到相关数据！" show-summary :summary-method="handleSummary"
           :data="infos" width="100%" :height="tableHeight" highlight-row stripe size="small"></Table>
    <Modal v-model="modal1" width="1200" :mask-closable="false" :title="checkOrgName + '-安全投入详情'">
      <Table ref='table2' style="margin-top: 10px" :loading="loading2" border :columns="infoColumns" no-data-text="没有查询到相关数据！"
             :data="infos2" width="100%" :height="divHeight" highlight-row stripe size="small" show-summary sum-text="合计"></Table>
      <div slot="footer" >
        <Button @click="modal1=false" class="ivu-btn-save">关闭</Button>
      </div>
    </Modal>

    <Modal v-model="modal2" width="800" :mask-closable="false" title="安全生产费用投入台账详情">
      <div :style="{height: divHeight2, overflowY: 'auto', overflowX: 'hidden'}">
        <Form ref="formCustom" :model="formData" label-position="top">
          <Row :gutter="16">
            <i-col span="24">
              <FormItem label="项目：" prop="codingName">
                <Input v-model="formData.codingName" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="12">
              <FormItem label="一月（万元）：" prop="codingName">
                <Input v-model="formData.january" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="24">
              <FormItem label="描述：">
                <Input v-model="formData.januaryDescription" type="textarea" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="12">
              <FormItem label="二月（万元）：" prop="codingName">
                <Input v-model="formData.february" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="24">
              <FormItem label="描述：">
                <Input v-model="formData.februaryDescription" type="textarea" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="12">
              <FormItem label="三月（万元）：" prop="codingName">
                <Input v-model="formData.march" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="24">
              <FormItem label="描述：">
                <Input v-model="formData.marchDescription" type="textarea" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="12">
              <FormItem label="四月（万元）：" prop="codingName">
                <Input v-model="formData.april" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="24">
              <FormItem label="描述：">
                <Input v-model="formData.aprilDescription" type="textarea" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="12">
              <FormItem label="五月（万元）：" prop="codingName">
                <Input v-model="formData.may" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="24">
              <FormItem label="描述：">
                <Input v-model="formData.mayDescription" type="textarea" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="12">
              <FormItem label="六月（万元）：" prop="codingName">
                <Input v-model="formData.june" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="24">
              <FormItem label="描述：">
                <Input v-model="formData.juneDescription" type="textarea" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="12">
              <FormItem label="七月（万元）：" prop="codingName">
                <Input v-model="formData.july" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="24">
              <FormItem label="描述：">
                <Input v-model="formData.julyDescription" type="textarea" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="12">
              <FormItem label="八月（万元）：" prop="codingName">
                <Input v-model="formData.august" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="24">
              <FormItem label="描述：">
                <Input v-model="formData.augustDescription" type="textarea" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="12">
              <FormItem label="九月（万元）：" prop="codingName">
                <Input v-model="formData.september" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="24">
              <FormItem label="描述：">
                <Input v-model="formData.septemberDescription" type="textarea" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="12">
              <FormItem label="十月（万元）：" prop="codingName">
                <Input v-model="formData.october" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="24">
              <FormItem label="描述：">
                <Input v-model="formData.octoberDescription" type="textarea" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="12">
              <FormItem label="十一月（万元）：" prop="codingName">
                <Input v-model="formData.november" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="24">
              <FormItem label="描述：">
                <Input v-model="formData.novemberDescription" type="textarea" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="12">
              <FormItem label="十二月（万元）：" prop="codingName">
                <Input v-model="formData.december" readonly/>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="16">
            <i-col span="24">
              <FormItem label="描述：">
                <Input v-model="formData.decemberDescription" type="textarea" readonly/>
              </FormItem>
            </i-col>
          </Row>
        </Form>
      </div>
      <div slot="footer">
        <Button @click="modal2 = false" class="ivu-btn-save" >关闭</Button>
      </div>
    </Modal>

    <div v-show="downloading"
         style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:99999;background-color:#000000;opacity:0.5;">
      <svg-bar style="position:absolute;top:50%;left:50%;margin-left:-100px;margin-top:-100px"
               :options="options" :value="batchProcess"></svg-bar>
    </div>

  </div>
</template>

<script>

import {sessionStorage} from '@/common/cacheUtils.js';
import {Api} from '../../../api'
import orgDom from "@/components/input-org.vue";

export default {
  name: "safetyProductionCompany",
  components:{
    orgDom,
  },
  data(){
    return {
      switchFlag: true,
      ifSpin: false,
      formData: {},
      divHeight: '',
      divHeight2: '',
      modal1: false,
      modal2: false,
      userInfo: sessionStorage('userId').getObject('userId'),
      formInline: {},
      checkOrgName: '',
      loading: false,
      loading2: false,
      columns:[
        {
          type: 'index',
          title: '序号',
          width: 80,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '公司名称',
          align: 'center',
          key: 'orgName',
          minWidth: 200,
        },
        {
          title: '1月（万元）',
          align: 'center',
          key: 'january',
          minWidth: 120,
        },
        {
          title: '2月（万元）',
          align: 'center',
          key: 'february',
          minWidth: 120,
        },
        {
          title: '3月（万元）',
          align: 'center',
          key: 'march',
          minWidth: 120,
        },
        {
          title: '4月（万元）',
          align: 'center',
          key: 'april',
          minWidth: 120,
        },
        {
          title: '5月（万元）',
          align: 'center',
          key: 'may',
          minWidth: 120,
        },
        {
          title: '6月（万元）',
          align: 'center',
          key: 'june',
          minWidth: 120,
        },
        {
          title: '7月（万元）',
          align: 'center',
          key: 'july',
          minWidth: 120,
        },
        {
          title: '8月（万元）',
          align: 'center',
          key: 'august',
          minWidth: 120,
        },
        {
          title: '9月（万元）',
          align: 'center',
          key: 'september',
          minWidth: 120,
        },
        {
          title: '10月（万元）',
          align: 'center',
          key: 'october',
          minWidth: 120,
        },
        {
          title: '11月（万元）',
          align: 'center',
          key: 'november',
          minWidth: 120,
        },
        {
          title: '12月（万元）',
          align: 'center',
          key: 'december',
          minWidth: 120,
        },
        {
          title: '合计',
          align: 'center',
          key: 'total',
          minWidth: 120,
        },
        {
          title: '操作',
          align: 'center',
          key: 'view',
          fixed: 'right',
          minWidth: 80,
          render: (h, params) => {
            return h('div', [
              h('A', {
                props: {
                  type: 'error',
                },
                style: {
                  fontSize: '14px',
                },
                on: {
                  click: () => {
                    this.checkOrgName = params.row.orgName;
                    this.toDetails(params.row.orgId, params.row.orgName);
                  }
                }
              }, '详情')
            ]);
          }
        }
      ],
      infos: [],
      tableHeight: '',
      infoColumns: [
        {
          type: 'index',
          title: '序号',
          width: 80,
          align: 'center',
          key: 'index',
          fixed: 'left',
        },
        {
          title: '项目',
          align: 'center',
          key: 'codingName',
          minWidth: 300,
          render: (h, params) => {
            return h('div', [
              h('A', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '12px'
                },
                on: {
                  click: () => {
                    this.formData = JSON.parse(JSON.stringify(params.row));
                    this.modal2 = true;
                  }
                }
              }, params.row.codingName),
            ]);
          }
        },
        {
          title: '1月（万元）',
          align: 'center',
          key: 'january',
          minWidth: 120,
        },
        {
          title: '描述',
          align: 'center',
          key: 'januaryDescription',
          minWidth: 180,
        },
        {
          title: '2月（万元）',
          align: 'center',
          key: 'february',
          minWidth: 120,
        },
        {
          title: '描述',
          align: 'center',
          key: 'februaryDescription',
          minWidth: 180,
        },
        {
          title: '3月（万元）',
          align: 'center',
          key: 'march',
          minWidth: 120,
        },
        {
          title: '描述',
          align: 'center',
          key: 'marchDescription',
          minWidth: 180,
        },
        {
          title: '4月（万元）',
          align: 'center',
          key: 'april',
          minWidth: 120,
        },
        {
          title: '描述',
          align: 'center',
          key: 'aprilDescription',
          minWidth: 180,
        },
        {
          title: '5月（万元）',
          align: 'center',
          key: 'may',
          minWidth: 120,
        },
        {
          title: '描述',
          align: 'center',
          key: 'mayDescription',
          minWidth: 180,
        },
        {
          title: '6月（万元）',
          align: 'center',
          key: 'june',
          minWidth: 120,
        },
        {
          title: '描述',
          align: 'center',
          key: 'juneDescription',
          minWidth: 180,
        },
        {
          title: '7月（万元）',
          align: 'center',
          key: 'july',
          minWidth: 120,
        },
        {
          title: '描述',
          align: 'center',
          key: 'julyDescription',
          minWidth: 180,
        },
        {
          title: '8月（万元）',
          align: 'center',
          key: 'august',
          minWidth: 120,
        },
        {
          title: '描述',
          align: 'center',
          key: 'augustDescription',
          minWidth: 180,
        },
        {
          title: '9月（万元）',
          align: 'center',
          key: 'september',
          minWidth: 120,
        },
        {
          title: '描述',
          align: 'center',
          key: 'septemberDescription',
          minWidth: 180,
        },
        {
          title: '10月（万元）',
          align: 'center',
          key: 'october',
          minWidth: 120,
        },
        {
          title: '描述',
          align: 'center',
          key: 'octoberDescription',
          minWidth: 180,
        },
        {
          title: '11月（万元）',
          align: 'center',
          key: 'november',
          minWidth: 120,
        },
        {
          title: '描述',
          align: 'center',
          key: 'novemberDescription',
          minWidth: 180,
        },
        {
          title: '12月（万元）',
          align: 'center',
          key: 'december',
          minWidth: 120,
        },
        {
          title: '描述',
          align: 'center',
          key: 'decemberDescription',
          minWidth: 180,
        },
        {
          title: '合计',
          width: 80,
          align: 'center',
          fixed: 'right',
          key: 'total',
          render:(h,params)=>{
            let newpar = parseFloat(params.row.total);

            return h('div',[
              h('span',newpar)
            ]);
          }
        }
      ],
      infos2: [],
    }
  },
  computed: {
    options: function() {
      return {
        radius: 50,//大小
        duration: 2,//变化时间长度
        circleWidth: 5,//圆环宽度
        pathColors: ['#A2A2A2', '#FA5657'], //圆环 底色和 上面的颜色
        circleLineCap: 'round',//进度条 形状  圆环 或者矩形
        text: function (value) {
          return this.htmlifyNumber(value) + '<span style="font-size: 0.4em;">%</span>';
        },
        textColor: 'rgb(33, 150, 243)'
      }
    }
  },
  mounted(){
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
    this.formInline.orgName = this.userInfo.twoLevelOrgName != null ? this.userInfo.twoLevelOrgName : this.userInfo.companyName
    this.formInline.inputYear = new Date();
    this.divHeight = window.innerHeight - 200;
    this.divHeight2 = window.innerHeight - 150 +'px';
    setTimeout(() => {
      this.$refs.orgDom.setCurrentOrg();
    }, 300);
    this.query();
  },
  methods:{
    query(){
      let data = {
        orgId: this.userInfo.twoLevelOrgId != null ? this.userInfo.twoLevelOrgId: this.userInfo.companyId
      };
      this.loading = true;
      this.formInline.year = new Date(this.formInline.inputYear).getFullYear();
      data = Object.assign(data,JSON.parse(JSON.stringify(this.formInline)));
      this.$http.get(Api.safetyProduction+ '/company', {
        params: data
      }).then(function(res){
        this.infos = res.data.data;
        this.loading = false;
      }, function(res){
        this.$Message.error('请求失败');
      });
    },
    cancel(){
      this.formInline = {
        orgName: this.userInfo.companyName,
        orgId: this.userInfo.companyId,
        inputYear: new Date()
      }
      setTimeout(() => {
        this.$refs.orgDom.setCurrentOrg();
      }, 300);
      this.query();
    },
    setOrgName(data){
      this.formInline.orgId = data.orgId;
      this.formInline.orgName = data.orgName;
    },
    toDetails(orgId, orgName){
      this.modal1 = true;
      let data = {
        orgId: orgId,
        orgName: orgName,
        year: new Date(this.formInline.inputYear).getFullYear()
      };
      this.loading2 = true;
      this.$http.get(Api.safetyProduction, {
        params: data
      }).then(function(res){
        this.infos2 = res.data.data.data;
        this.loading2 = false;
      }, function(res){
        this.$Message.error('请求失败');
      });
    },
    handleSummary({ columns, data }){
      const sums = {};
      columns.forEach((column, index) => {
        const key = column.key;
        if (index === 0) {
          sums[key] = {
            key,
            value: '合计'
          };
          return;
        }else if(index === 1){
          sums[key] = {
            key,
            value: this.formInline.orgName
          };
          return;
        }

        const values = data.map(item => Number(item[key]));
        if (!values.every(value => isNaN(value))) {
          const v = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[key] = {
            key,
            value: v.toFixed(6)
          };
        } else {
          sums[key] = {
            key,
            value: ''
          };
        }

      });
      return sums;
    },
    exportRows(){
      let data = {
        orgId: this.userInfo.twoLevelOrgId != null ? this.userInfo.twoLevelOrgId: this.userInfo.companyId
      };
      this.formInline.year = new Date(this.formInline.inputYear).getFullYear();
      data = Object.assign(data,JSON.parse(JSON.stringify(this.formInline)));
      this.ifSpin = true;
      this.$http.get(Api.safetyProduction + '/company/export',{
        params: data,
        responseType: 'arraybuffer'
      }).then((res) => {
        const aLink = document.createElement("a");
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel"
        })
        aLink.href = URL.createObjectURL(blob);
        aLink.download = "各公司安全投入情况.xlsx" //标题
        aLink.click();
        document.body.appendChild(aLink);
        this.ifSpin = false;
      }, function(res){
        this.$Message.error('生成失败');
      })
    },
    switchQuery(flag){
      this.switchFlag = flag;
      if(!this.switchFlag) {
        this.tableHeight = this.tableHeight - 44;
      }else{
        this.tableHeight = this.tableHeight + 44;
      }
    },
  }
}
</script>

<style scoped>
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
</style>
